﻿<%@ Page Title="" Language="C#" MasterPageFile="~/masters/SecuredInterna.Master" AutoEventWireup="true" CodeBehind="pagosCreditos.aspx.cs" Inherits="BancoIdeal.secured.pagosCreditos" %>
<asp:Content ID="Content1" ContentPlaceHolderID="TitlePageSecured" runat="server">
    Pagos electrónicos
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="head" runat="server">
	<script src="../scripts/util.js" type="text/javascript"></script>

    <script type="text/javascript">
    	var dirProductos = "/WS/Productos.asmx";
    	var idCuenta = '';
    	var idCredito = '';
    	var valorPago = 0;

        $( function () {
        	loadingModal();
        	$( '#btnAceptar' ).bind( 'click', clickCuentas );
        	LlamadoAjax( "{ idCliente: " + idCliente + " }", dirProductos, 'GetProductosColocacionPagar', OnErrorCall, OnSuccessCallGetProductosColocacion );        	        	
        } );

        function OnErrorCall( response ) {
            alert( response.status + " " + response.statusText );
        }

        function GetStyleInformacion( idProducto ) {
            switch ( parseInt( idProducto ) ) {
                case 3:
                    return "invertido-creditolibre-55px";
                case 4:
                    return "invertido-creditovivienda-55px";
                case 5:
                    return "invertido-creditovehiculo-55px";
                case 9:
                    return "invertido-creditomaster-55px";
                case 10:
                    return "invertido-creditovisa-55px";
                case 11:
                    return "invertido-creditoAMEX-55px";
                case 12:
                    return "invertido-creditolibre-55px";
                case 13:
                    return "invertido-creditoestudio-55px";
                case 14:
                    return "invertido-creditoviajes-55px";
                case 15:
                    return "invertido-creditomicro-55px";
                default:
                    return "invertido-creditolibre-55px";
            }
        }

        function OnSuccessCallGetProductosColocacion( response ) {
        	response = eval( "( " + response.d + " )" );
        	for ( var i = 0; i < response.length; i++ ) {
        		$( "#movimientosCuentaActiva" ).append( '<div class="productoVinculado" id="productoVinculado' + i + '"><div class="producto_55px"><span class="' + GetStyleInformacion( response[i].IdProducto ) + ' icono-propiedades-55px displayB"></span></div><span ><span class="textoColor paddingSup30 displayB">' + response[i].NombreProductoCliente + '</span></span></div>' );
        		$( '#productoVinculado' + i ).click( { response: response[i] }, clickCreditoLink );
        	}
        	ScrollToolFun();
        	$( '.cargandoModal' ).dialog( 'close' );
        }

        function clickPagar( event ) {
        	if ( idCuenta == '' ) {
        		loadingMessage( 'No ha seleccionado la cuanta que se va a debitar' );
        		return;
        	}

        	loadingModal();
        	LlamadoAjax( "{ idProductoCliente: " + idCredito + ", idProductoClienteADescontar: " + idCuenta + ", valor: " + valorPago.toFixed( 2 ) + " }", dirProductos, 'PagarCreditoConTransferencia', OnErrorCall, function ( response ) {
        		$( '.cargandoModal' ).dialog( 'close' );
        		response = eval( "( " + response.d + " )" );
        		if ( response == "Success" ) {
        			alert( 'Pago Realizado con exito' );
        			location.reload();
        		} else {
        			loadingMessage( 'Error: '+ response );
        		}
        	} );
        	
		}

        function clickCuentas( event ) {
        	idCuenta = $( 'input:radio[name=OrigenCuenta]:checked' ).val();
        	$( '#seleccionarCuenta' ).dialog( 'close' );
        }

        function clickBotonPagar( event ) {
        	loadingModal();
        	var id = parseInt($( this ).attr( 'id' ));        	
        	LlamadoAjax( "{ idCliente: " + idCliente + " }", dirProductos, 'GetProductosCaptacion', OnErrorCall, function ( response ) {
        		response = eval( "( " + response.d + " )" );

        		$( "#idCuentasPagar" ).html( "" );
        		for ( var i = 0; i < response.length; i++ ) {
        			if ( response[i].IdProducto == id ) {
        				$( "#idCuentasPagar" ).append( '<tr><td width="30"><div class="RadioButtonContainer"><span class="checkBoxUnChecked"><input type="radio" name="OrigenCuenta" id="OrigenCuenta" value="' + response[i].IdProductoCliente + '"/></span></div></td><td><label><strong>' + response[i].NombreProductoCliente + '</strong></label><br /><span class="textGris margenleft-20">Disponible:</span><br /><span class="saldoCuenta textoColor margen5 margenleft-20">$ ' + response[i].Saldo + '</span></td></tr>' );
        			}
        		}

        		$( '.RadioButtonContainer input' ).unbind( 'click' );
        		$( '.RadioButtonContainer input' ).bind( 'click', CambiarRadioFondo );        		

        		$( '.iconoCancelar' ).click( 
				function () {
					$( '.dialog' ).dialog( 'close' );
				} );
			} );
			$( '.cargandoModal' ).dialog( 'close' );
			$( '#seleccionarCuenta' ).dialog( { modal: true } );			
        }

        function clickCreditoLink( event ) {
        	idCuenta = '';
        	idCredito = event.data.response.IdProductoCliente;
        	valorPago = event.data.response.ValorPago;
        	$( '#idPagar' ).unbind( 'click' ); ;
        	$( '#idPagar' ).bind( 'click', clickPagar );
        	loadingModal();
        	$( '.botonPagar' ).unbind( 'click' );
        	$( '.botonPagar' ).click( { response: event.data.response }, clickBotonPagar );
        	$( "#detalleProducto" ).show();
            $( "#idNombre" ).html(" "+ event.data.response.NombreProductoCliente );
            $( "#idPago" ).html( "$" + event.data.response.Cuota );
            $( "#idPagoTotal" ).html( "$" + event.data.response.ValorDeuda );
            $( "#idFechaCorte" ).html( ( new Date ).toLocaleDateString() );
            $( "#idTipoFranquiciaNombre" ).html( event.data.response.NombreProducto );
            $( "#idTasaInteres" ).html( ( parseFloat( event.data.response.TasaInteres ) * 100 ).toFixed( 2 ) + '%' );
            $( "#idFechaVencimiento" ).html( eval( event.data.response.FechaFin.replace( /\/Date\((\d+)\)\//gi, "new Date($1)" ) ).toLocaleDateString() );
            $( "#idCupo" ).html( "$" + event.data.response.CupoDisponible );
            $( "#idPeriodo" ).html( event.data.response.Periodos+" meses" );
            $( "#idIcono" ).html( '<span class="' + GetStyleInformacion( event.data.response.IdProducto ) + ' icono-propiedades-55px displayB"></span>' );
            switch ( parseInt( event.data.response.IdProducto ) ) {
                case 3:
                case 4:
                case 5:
                case 12:
                case 13:
                case 14:
                case 15:
                    $( "#idTipoFranquiciaTexto" ).html( "Tipo de credito" );
                    break
                case 9:
                case 10:
                case 11:
                    $( "#idTipoFranquiciaTexto" ).html( "Franquicia" );
                    break

            }
            $( '.cargandoModal' ).dialog( 'close' );
        }
    </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="SectionIcon" runat="server">
    <span class="icono iconoPagos48x">
                    	&nbsp;
                    </span>
</asp:Content>
<asp:Content ID="Content4" ContentPlaceHolderID="SectionTitle" runat="server">
    Pagos
</asp:Content>
<asp:Content ID="Content6" ContentPlaceHolderID="InfoScreen" runat="server">
    Los íconos de esta pantalla pertenecen a los servicios que tienes registrados para pago electrónicos.<br />
    Para realizar el pago, debes seleccionar una factura y antes de realizar el pago, debes seleccionar una de tus cuentas para el desembolso.
</asp:Content>
<asp:Content ID="Content7" ContentPlaceHolderID="MoreInfoScreen" runat="server">
    <a href="#" class="verMasInfo">
                	<span>
                    	<span>
                        	Ver más información
                        </span>
                    </span>
                </a>
</asp:Content>
<asp:Content ID="Content8" ContentPlaceHolderID="SectionOptions" runat="server">
    <ul>
                	<li>
                        <a href="pagosCreditos.aspx" id="pagarCreditos" class="opcionSeccion">
                            <span class="icono pagos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Pagar mis créditos
                                </span>
                            </span>
                        </a>
                    </li>
                    <li>
                        <a href="pagosFacturas.aspx" class="opcionSeccion">
                            <span class="icono pagos">
                                &nbsp;
                            </span>
                            <span class="fondoAdicional">
                                <span class="estiloTexto">
                                    Pagar mis facturas
                                </span>
                            </span>
                        </a>
                    </li>
                </ul>
</asp:Content>
<asp:Content ID="Content9" ContentPlaceHolderID="TitleSubSectionPanorama" runat="server">
    Pagos electrónicos
</asp:Content>
<asp:Content ID="Content10" ContentPlaceHolderID="OpcionesTileHorizontal" runat="server">
</asp:Content>
<asp:Content ID="Content11" ContentPlaceHolderID="MainContent" runat="server">
    <div class="paginaPagarCreditos" >
                
                    <div id="cuentaActivaProductos">
                        <div id="infoCuentaMovimientos">
                              <span><span>Este es el portafolio de productos vinculados a su cuenta:</span></span>
                        </div>
                        <div id="cuentasCarrusel" class="carruselMovimientos borderRightDotted">
                            <img src="images/topdiagonal12px.gif" class="diagonalimg"/>
                            <div id="botonUp">
                                  <a href="#"><span class="ocultar">subir</span></a>
                            </div>
                            
                            <div id="movimientosCuentaActiva">

                            </div>
        					<img src="images/bottomdiagonal12px.gif" class="diagonalbottomimg"/>
                            <div id="botonDown">
                                
                                <a href="#"><span class="ocultar">bajar</span></a>
                            </div>
                            
                        </div>
                    </div>
              
                    <div class="detalleProducto" id="detalleProducto" style="display:none;">
                        <h1>
                            <span class="icono invertido-creditoMaster-48px displayB" id="idIcono"></span><span class="fondoAdicional"><span class="estiloTexto" id="idNombre">                            
                            </span></span>
                        </h1>
                            <!--inicio de información básica de pantalla-->
                        <div class="detalleProductoScroll">
                
                        <!--fin de información básica de pantalla--> 
                            <div class="formularioProductos">
                                <table class="tablaProductos" width="100%" border="0" cellspacing="0" cellpadding="0">
                                	<tr>
                                        <td width="35%" class="labelsModal">Pago mínimo:</td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idPago">
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="35%" class="labelsModal">Pago Total:</td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idPagoTotal">
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td class="labelsModal">Fecha de corte:</td>
                                        <td>
                                        	<span class="datoCliente" id="idFechaCorte">
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                                <table class="tablaProductos" width="100%" border="0" cellspacing="0" cellpadding="0">
                                    
                                    <tr>
                                        <td width="35%" class="labelsModal" id="idTipoFranquiciaTexto"></td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idTipoFranquiciaNombre">
                                            	Master Card
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="35%" class="labelsModal">Interés:</td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idTasaInteres">
                                            	1.5%
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="35%" class="labelsModal">Fecha de vencimiento:</td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idFechaVencimiento">
                                            	Agosto de 2016
                                            </span>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="35%" class="labelsModal">Cupo disponible:</td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idCupo">
                                            </span>
                                        </td>
                                    </tr>                                    
                                    <tr>
                                        <td class="labelsModal">Débito automático:</td>
                                        <td id="productos">
                                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                                                <tr>
                                                    <td width="15%">
                                                        <div class="RadioButtonContainer">
                                                        	<div class="checkBoxChecked">
                                                            	<!-- Dejamos este vacio porque no es seleccionable -->
                                                            </div>
                                                            <span class="datoCliente">
                                            					Si
                                            				</span>
                                                        </div>
                                                        
                                                    </td>
                                      			</tr>
                                            </table>
                                        </td>
                                    </tr>
                                    <tr>
                                        <td width="35%" class="labelsModal">Plazo:</td>
                                        <td width="65%">
                                        	<span class="datoCliente" id="idPeriodo">
                                            </span>
                                        </td>
                                    </tr>
                                </table>
                            </div>
                        </div>
                        <div class="OpcionesPagar">
                        	<menu type="toolbar">
                                <div class="SeleccionCuentaBtn">
                                    <ul>
                                        <li> <a href="#" title="Pagar con una cuenta de ahorros" id="1" class="boton_26px botonPagar"><span class="displayB iconoCuentaAhorros"><span class="ocultar">Cuenta de Ahorros</span></span></a></li>
                                        <li> <a href="#" title="Pagar con una cuenta corriente" id="2" class="boton_26px botonPagar"><span class="displayB iconoCuentaCorriente"><span class="ocultar">Cuenta Corriente</span></span></a></li>
                                    </ul>
                                </div>
                                <div class="controlBtn">
                                    <ul>
                                        <li> <a href="#" title="Pagar" id="idPagar" class="boton_26px backgroundVerde"><span class="displayB iconoAceptarVentana"><span class="ocultar">Solicitar</span></span></a></li>
                                        <li> <a href="#" title="Imprimir" class="boton_26px"><span class="displayB iconoImprimirBtn"><span class="ocultar">Imprimir</span></span></a></li>
                                        <li> <a href="#" title="Cancelar" class="boton_26px backgroundRojo"><span class="displayB iconoCancelar"><span class="ocultar">eliminar Producto</span></span></a></li>
                                    </ul>
                                </div>
                            </menu>
                        </div>
                    </div>
        </div>
</asp:Content>
<asp:Content ID="Content12" ContentPlaceHolderID="FooterWebPage" runat="server">
</asp:Content>
<asp:Content ID="Content13" ContentPlaceHolderID="VentanasEmergentes" runat="server">
<div id="seleccionarCuenta" class="dialog" title="Pagar créditos">
        <div class="menuTituloForm">
            <a href="#" title="Adjuntar archivo" class="boton_26px"><span class="displayB iconoAdjuntarArchivo"><span class="ocultar">Adjuntar archivo</span></span></a>
            <h2 class="noMargin noPadding"><span class="floatright">Cuentas disponibles</span></h2>
        </div>
        <p>Seleccione la cuenta para realizar su pago.</p>
        <div class="formularioProductos">
        	<table>
                <tr>
                	<td width="40%" class="labelsModal">
                    	Seleccione su cuenta:
                    </td>
                    <td width="60%">
                    	<table width="100%" border="0" cellspacing="0" cellpadding="0" id="idCuentasPagar">

                        </table>
                    </td>
                </tr>
            </table>
        </div>
        <menu type="toolbar">
            <div class="controlBtn">
                <ul>
					<li> <a href="#" title="Aceptar" id="btnAceptar" class="boton_26px backgroundVerde"><span class="displayB iconoAceptarVentana"><span class="ocultar">Aceptar</span></span></a></li>
                    <li> <a href="#" title="Cancelar" class="boton_26px backgroundRojo"><span class="displayB iconoCancelar"><span class="ocultar">eliminar Producto</span></span></a></li>
                </ul>
            </div>
        </menu>
    </div>
</asp:Content>
